<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>讯飞AI API测试页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            color: #333;
            margin-bottom: 10px;
        }
        
        .subtitle {
            color: #666;
            margin-bottom: 30px;
        }
        
        .api-section {
            margin-bottom: 30px;
            padding: 20px;
            background: #f5f7fa;
            border-radius: 8px;
        }
        
        h2 {
            color: #409eff;
            margin-bottom: 15px;
            font-size: 18px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            color: #606266;
            font-weight: 500;
        }
        
        input, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            font-size: 14px;
            font-family: inherit;
        }
        
        textarea {
            resize: vertical;
            min-height: 80px;
        }
        
        button {
            background: #409eff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: background 0.3s;
        }
        
        button:hover {
            background: #66b1ff;
        }
        
        button:disabled {
            background: #c0c4cc;
            cursor: not-allowed;
        }
        
        .response {
            margin-top: 15px;
            padding: 15px;
            background: white;
            border-radius: 4px;
            border-left: 3px solid #409eff;
            white-space: pre-wrap;
            word-break: break-word;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .response.error {
            border-left-color: #f56c6c;
            color: #f56c6c;
        }
        
        .response.success {
            border-left-color: #67c23a;
        }
        
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #409eff;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .flex {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        code {
            background: #f0f0f0;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🤖 讯飞AI API测试页面</h1>
        <p class="subtitle">测试后端提供的5个API接口</p>
        
        <!-- API 1: 普通聊天 -->
        <div class="api-section">
            <h2>1. POST /api/XunfeiAI/chat - 普通聊天</h2>
            <div class="form-group">
                <label>消息内容：</label>
                <textarea id="chat-message" placeholder="请输入您的问题...">你好，请介绍一下仓储管理系统</textarea>
            </div>
            <button onclick="testChat()">发送请求</button>
            <div id="chat-response" class="response" style="display: none;"></div>
        </div>
        
        <!-- API 2: 流式聊天 -->
        <div class="api-section">
            <h2>2. POST /api/XunfeiAI/chat/stream - 流式聊天</h2>
            <div class="form-group">
                <label>消息内容：</label>
                <textarea id="stream-message" placeholder="请输入您的问题...">如何进行库存盘点？</textarea>
            </div>
            <button onclick="testStreamChat()">发送流式请求</button>
            <div id="stream-response" class="response" style="display: none;"></div>
        </div>
        
        <!-- API 3: 创建对话 -->
        <div class="api-section">
            <h2>3. POST /api/XunfeiAI/conversation - 创建/管理对话</h2>
            <div class="form-group">
                <label>会话ID：</label>
                <input type="text" id="conv-session-id" value="test-session-001">
            </div>
            <div class="form-group">
                <label>消息内容：</label>
                <input type="text" id="conv-message" value="你好">
            </div>
            <button onclick="testConversation()">创建对话</button>
            <div id="conv-response" class="response" style="display: none;"></div>
        </div>
        
        <!-- API 4: 清空对话 -->
        <div class="api-section">
            <h2>4. POST /api/XunfeiAI/conversation/clear - 清空对话</h2>
            <div class="form-group">
                <label>会话ID：</label>
                <input type="text" id="clear-session-id" value="test-session-001">
            </div>
            <button onclick="testClearConversation()">清空对话</button>
            <div id="clear-response" class="response" style="display: none;"></div>
        </div>
        
        <!-- API 5: 获取分页数据 -->
        <div class="api-section">
            <h2>5. POST /api/XunfeiAI/GetPageData - 获取分页数据</h2>
            <div class="form-group">
                <label>页码：</label>
                <input type="number" id="page" value="0">
            </div>
            <div class="form-group">
                <label>每页行数：</label>
                <input type="number" id="rows" value="10">
            </div>
            <button onclick="testGetPageData()">获取数据</button>
            <div id="page-response" class="response" style="display: none;"></div>
        </div>
    </div>
    
    <script>
        const API_BASE = 'http://localhost:9991/api/XunfeiAI';
        
        // 工具函数：显示响应
        function showResponse(elementId, content, isError = false) {
            const element = document.getElementById(elementId);
            element.style.display = 'block';
            element.className = isError ? 'response error' : 'response success';
            element.textContent = typeof content === 'object' ? JSON.stringify(content, null, 2) : content;
        }
        
        // 工具函数：显示加载
        function showLoading(elementId) {
            const element = document.getElementById(elementId);
            element.style.display = 'block';
            element.className = 'response';
            element.innerHTML = '<div class="loading"></div> 加载中...';
        }
        
        // 1. 测试普通聊天
        async function testChat() {
            const message = document.getElementById('chat-message').value;
            showLoading('chat-response');
            
            try {
                const response = await fetch(`${API_BASE}/chat`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        message: message,
                        history: [
                            { role: '1', content: '你好' },
                            { role: '2', content: '您好！有什么可以帮您的吗？' }
                        ]
                    })
                });
                
                const data = await response.json();
                showResponse('chat-response', data);
            } catch (error) {
                showResponse('chat-response', '请求失败: ' + error.message, true);
            }
        }
        
        // 2. 测试流式聊天
        async function testStreamChat() {
            const message = document.getElementById('stream-message').value;
            showLoading('stream-response');
            
            try {
                const response = await fetch(`${API_BASE}/chat/stream`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        message: message,
                        history: []
                    })
                });
                
                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let result = '';
                
                const element = document.getElementById('stream-response');
                element.style.display = 'block';
                element.className = 'response success';
                element.textContent = '';
                
                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;
                    
                    const chunk = decoder.decode(value);
                    const lines = chunk.split('\n').filter(line => line.trim());
                    
                    for (const line of lines) {
                        if (line.startsWith('data: ')) {
                            const data = line.substring(6);
                            if (data === '[DONE]') {
                                element.textContent = result || '流式响应完成';
                                return;
                            }
                            
                            try {
                                const jsonData = JSON.parse(data);
                                if (jsonData.content) {
                                    result += jsonData.content;
                                    element.textContent = result;
                                }
                            } catch (e) {
                                console.error('解析失败:', e);
                            }
                        }
                    }
                }
            } catch (error) {
                showResponse('stream-response', '流式请求失败: ' + error.message, true);
            }
        }
        
        // 3. 测试创建对话
        async function testConversation() {
            const sessionId = document.getElementById('conv-session-id').value;
            const message = document.getElementById('conv-message').value;
            showLoading('conv-response');
            
            try {
                const response = await fetch(`${API_BASE}/conversation`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        sessionId: sessionId,
                        message: message
                    })
                });
                
                const data = await response.json();
                showResponse('conv-response', data);
            } catch (error) {
                showResponse('conv-response', '请求失败: ' + error.message, true);
            }
        }
        
        // 4. 测试清空对话
        async function testClearConversation() {
            const sessionId = document.getElementById('clear-session-id').value;
            showLoading('clear-response');
            
            try {
                const response = await fetch(`${API_BASE}/conversation/clear`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(sessionId)
                });
                
                const data = await response.json();
                showResponse('clear-response', data);
            } catch (error) {
                showResponse('clear-response', '请求失败: ' + error.message, true);
            }
        }
        
        // 5. 测试获取分页数据
        async function testGetPageData() {
            const page = document.getElementById('page').value;
            const rows = document.getElementById('rows').value;
            showLoading('page-response');
            
            try {
                const response = await fetch(`${API_BASE}/GetPageData`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        page: parseInt(page),
                        rows: parseInt(rows),
                        total: 0,
                        tableName: 'string',
                        name: 'string',
                        wheres: 'string',
                        order: 'string',
                        export: true,
                        value: 'string',
                        filter: [
                            {
                                name: 'string',
                                value: 'string',
                                displayType: 'string'
                            }
                        ]
                    })
                });
                
                const data = await response.json();
                showResponse('page-response', data);
            } catch (error) {
                showResponse('page-response', '请求失败: ' + error.message, true);
            }
        }
    </script>
</body>
</html>



